前言

昨天看完了線段 Polyline，接著要看的是常用在繪製地籍或坵塊的多邊形 (Polygon)。

繪製多邊形

多邊形跟線段一樣，都是由數個經緯度組成，只是多邊形屬於封閉的線段，且會形成內部封閉的區域。

繪製多邊形的邏輯跟線段一樣:

1. 使用 PolygonOptions 新增組成多邊形的經緯度
2. 一樣操作 PolygonOptions 調整樣式
3. 呼叫 GoogleMap.addPolygon(PolygonOptions) 繪製並取得 Polygon 物件。

基本款

/**
 * 基本款 Polygon
 *
 * @param map
 */
private fun addSimplePolygon(map: GoogleMap) {
    val polygonList = listOf(
        LatLng(24.1607, 120.6404),
        LatLng(24.1620, 120.6386),
        LatLng(24.1630, 120.6384),
        LatLng(24.1638, 120.6390),
        LatLng(24.1636, 120.6402),
        LatLng(24.1644, 120.6412),
        LatLng(24.1631, 120.6424),
        LatLng(24.1623, 120.6416),
        LatLng(24.1607, 120.6404)
    )
    val polygonOptions = PolygonOptions()
        .addAll(polygonList)
    map.addPolygon(polygonOptions)
}

上面範例的第一筆與最後一筆經緯度相同，但其實即便第一筆與最後一筆不相同，API 會自動補最後一位，讓多邊形封閉起來。

中間有空洞 addHole()

如果是中間有空洞的多邊形，需要使用 addHole() 這個方法，把空洞的經緯度點位加進去。

/**
 * 中間有空洞的 Polygon
 *
 * @param map
 */
private fun addPolygonWithHole(map: GoogleMap) {

    val hole = listOf(
        LatLng(24.1623, 120.6392),
        LatLng(24.1627, 120.6412),
        LatLng(24.1615, 120.6407),
    )

    val polygonList = listOf(
        LatLng(24.1607, 120.6404),
        LatLng(24.1620, 120.6386),
        LatLng(24.1630, 120.6384),
        LatLng(24.1638, 120.6390),
        LatLng(24.1636, 120.6402),
        LatLng(24.1644, 120.6412),
        LatLng(24.1631, 120.6424),
        LatLng(24.1623, 120.6416),
        LatLng(24.1607, 120.6404)
    )

    val polygonOptions = PolygonOptions()
        .addAll(polygonList)
        .addHole(hole)
        .fillColor(Color.GREEN)

    map.addPolygon(polygonOptions)
}

如果空洞的範圍跟外部重疊，只有內部的會填滿

修改 Polygon

已加入的 Polygon 跟 Polyline 一樣，可以呼叫 setPoints() 更新 Polygon。

外觀樣式

填滿顏色

PolygonOptions.fillColor()

fillColor() 的效果不影響，hole 中空的部分，因為中空本來就不會填滿。

另外，fillColor() 的顏色支援不透明。

線段顏色

設定多邊形框線的顏色。

PolygonOptions.strokeColor()

線段寬度

設定多邊形框線的寬度。

PolygonOptions.strokeWidth(20f)

線段圓角

設定多邊形框線的轉折處。

PolygonOptions.strokeJointType(JointType.ROUND)

線段 Pattern

設定多邊形框線的 Pattern。

PolygonOptions.strokePattern(listOf(Dash(20F), Gap(5f)))

綜合範例

/**
 * 帶有樣式的 Polygon
 *
 * @param map
 */
private fun addPolygonWithStyle(map: GoogleMap) {
    val hole = listOf(
        LatLng(24.1623, 120.6392),
        LatLng(24.1627, 120.6412),
        LatLng(24.1615, 120.6407),
    )
    val polygonList = listOf(
        LatLng(24.1607, 120.6404),
        LatLng(24.1620, 120.6386),
        LatLng(24.1630, 120.6384),
        LatLng(24.1638, 120.6390),
        LatLng(24.1636, 120.6402),
        LatLng(24.1644, 120.6412),
        LatLng(24.1631, 120.6424),
        LatLng(24.1623, 120.6416),
        LatLng(24.1607, 120.6404)
    )
    val polygonOptions = PolygonOptions()
        .addAll(polygonList)
        .addHole(hole)
        // 填滿顏色
        .fillColor(Color.parseColor("#90bd4a55"))
        // 線段顏色
        .strokeColor(Color.GREEN)
        // 線段寬度
        .strokeWidth(20f)
        // 線段圓角
        .strokeJointType(JointType.ROUND)
        // 線段 Pattern
        .strokePattern(listOf(Dash(10F), Gap(30f)))
    map.addPolygon(polygonOptions)
}

點擊事件

多邊形跟線段一樣，預設沒有啟用點擊事件，如果需要啟用，要呼叫 Polygon.setClickable(true) 來啟用。

監聽事件是使用 OnPolygonClickListener，呼叫GoogleMap.setOnPolygonClickListener(OnPolygonClickListener) 加入。

小結

以上就是今天的多邊形 Polygon 介紹，操作上跟線段很像，可以變化的外觀設定很多，大家可以根據自身的設計需求多嘗試看看，也歡迎留言討論～

明天見！！